<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen p-[32rpx] box-border">
    <text class="block text-[56rpx] font-extrabold mb-[48rpx] text-center text-blue-600">服务对象个人基本信息</text>
    
    <view class="max-w-[700rpx] w-full mx-auto box-border">
      <!-- 基本信息区域 -->
      <view class="bg-gray-50 rounded-[20rpx] p-[32rpx] mb-[40rpx] box-border">
        <text class="block text-[36rpx] font-bold mb-[32rpx] text-gray-700">📋 基本信息</text>
        
        <view class="mb-[32rpx] box-border">
          <text class="block text-[28rpx] text-gray-600 mb-[12rpx]">姓名</text>
          <view class="bg-white rounded-[12rpx] p-[24rpx] border border-gray-200">
            <text class="text-[32rpx] text-gray-800">{{ nurseUser.name || '暂无' }}</text>
          </view>
        </view>
        
        <view class="mb-[32rpx] box-border">
          <text class="block text-[28rpx] text-gray-600 mb-[12rpx]">身份证号码</text>
          <view class="bg-white rounded-[12rpx] p-[24rpx] border border-gray-200">
            <text class="text-[32rpx] text-gray-800">{{ nurseUser.idCard || nurseUser.idcard || '暂无' }}</text>
          </view>
        </view>

        <view class="mb-[32rpx] box-border">
          <text class="block text-[28rpx] text-gray-600 mb-[12rpx]">性别</text>
          <view class="bg-white rounded-[12rpx] p-[24rpx] border border-gray-200">
            <text class="text-[32rpx] text-gray-800">{{ getSexLabel(nurseUser.sex) }}</text>
          </view>
        </view>

        <view class="mb-[32rpx] box-border">
          <text class="block text-[28rpx] text-gray-600 mb-[12rpx]">手机号码</text>
          <view class="bg-white rounded-[12rpx] p-[24rpx] border border-gray-200">
            <text class="text-[32rpx] text-gray-800">{{ nurseUser.phone || nurseUser.mobile || '暂无' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 健康相关信息区域 -->
      <view class="bg-blue-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border">
        <text class="block text-[28rpx] font-bold mb-[24rpx] text-blue-700">🏥 健康相关信息</text>
        
        <!-- <view class="mb-[24rpx] box-border">
          <text class="block text-[24rpx] text-gray-600 mb-[8rpx]">电子健康码</text>
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[28rpx] text-gray-800">{{ nurseUser.vuid || '暂无' }}</text>
          </view>
        </view> -->
        
        <view class="mb-[24rpx] box-border">
          <text class="block text-[24rpx] text-gray-600 mb-[8rpx]">认证状态</text>
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[28rpx]" :class="getVerificationStatusClass()">{{ getVerificationStatus() }}</text>
          </view>
        </view>
        
        <view class="mb-[24rpx] box-border" v-if="nurseUser.vuid">
          <text class="block text-[24rpx] text-gray-600 mb-[8rpx]">电子健康码</text>
          <view v-if="nurseUser.vuid" class="bg-white rounded-[8rpx] p-[36rpx] border border-gray-200 flex justify-center">
            <CodeImg :code="nurseUser.vuid" />
          </view>
          <view v-else class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[28rpx] text-gray-800 break-all">暂无</text>
          </view>
        </view>
      </view>
      
      <!-- 医院信息区域 -->
      <view class="bg-green-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border">
        <text class="block text-[28rpx] font-bold mb-[24rpx] text-green-700">🏥 医院信息</text>
        
        <view class="mb-[24rpx] box-border">
          <text class="block text-[24rpx] text-gray-600 mb-[8rpx]">默认医院</text>
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[28rpx] text-gray-800">{{ nurseUser.defaultHospitalName || '暂无' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 地址信息区域 -->
      <view class="bg-orange-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border" v-if="hasAddressInfo">
        <text class="block text-[28rpx] font-bold mb-[24rpx] text-orange-700">📍 地址信息</text>
        
        <view class="mb-[24rpx] box-border">
          <text class="block text-[24rpx] text-gray-600 mb-[8rpx]">常住详细地址</text>
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[28rpx] text-gray-800">{{ getFullAddress() }}</text>
          </view>
        </view>
      </view>
      
      <!-- 联系方式区域 -->
      <!-- <view class="bg-teal-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border">
        <text class="block text-[28rpx] font-bold mb-[24rpx] text-teal-700">📱 联系方式</text>
        
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow-md bg-teal-500 border-teal-500 hover:bg-teal-600 active:bg-teal-700"
          @click="goTo('contact')"
        >
          <view class="flex items-center justify-center">
            <text class="text-white text-[32rpx]">查看联系方式</text>
          </view>
        </nut-button>
      </view> -->
      
      <!-- 操作按钮 -->
      <view class="mt-[48rpx] flex gap-[24rpx]">
        <nut-button 
          block 
          type="default" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1"
          @click="goBack"
        >
          返回
        </nut-button>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1 bg-blue-500 hover:bg-blue-600 active:bg-blue-700"
          @click="refreshData"
        >
          刷新数据
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref, computed } from 'vue'
import { useAuthStore } from '@/store'
import { storeToRefs } from 'pinia'
import CodeImg from '@/package-my/healthcode/component/code-img.vue'

// 获取用户信息
const authStore = useAuthStore()
const { nurseUser } = storeToRefs(authStore)

// 性别转换
const getSexLabel = (sex: string) => {
  switch (sex) {
    case '1':
    case 'male':
    case '男':
      return '男'
    case '2':
    case 'female':
    case '女':
      return '女'
    default:
      return '暂无'
  }
}

// 认证状态
const getVerificationStatus = () => {
  if (nurseUser.value.isVerified === '1') {
    return '已认证'
  }
  if (nurseUser.value.isPhone) {
    return '已认证'
  }
  return '未认证'
}

// 认证状态样式
const getVerificationStatusClass = () => {
  const status = getVerificationStatus()
  if (status === '已认证') {
    return 'text-green-600'
  }
  return 'text-red-600'
}

// 判断是否有地址信息
const hasAddressInfo = computed(() => {
  return !!(nurseUser.value.address || nurseUser.value.areaName || 
           nurseUser.value.nurseUserAddrList?.length > 0 ||
           nurseUser.value.nurseHomeAddrList?.length > 0)
})

// 获取完整地址
const getFullAddress = () => {
  // 优先使用用户直接的地址信息
  if (nurseUser.value.areaName || nurseUser.value.address) {
    return `${nurseUser.value.areaName || ''}${nurseUser.value.address || ''}`
  }
  
  // 其次使用家庭地址列表的默认地址
  const defaultHomeAddr = nurseUser.value.nurseHomeAddrList?.find(
    addr => addr.isDefault === true || addr.isDefault === '1' || String(addr.isDefault) === '1'
  )
  if (defaultHomeAddr) {
    return `${defaultHomeAddr.areaName || ''}${defaultHomeAddr.address || ''}`
  }
  
  // 最后使用医院地址列表的默认地址
  const defaultAddr = nurseUser.value.nurseUserAddrList?.find(
    addr => addr.isDefault === true || addr.isDefault === '1' || String(addr.isDefault) === '1'
  )
  if (defaultAddr) {
    return `${defaultAddr.areaName || ''}${defaultAddr.address || ''}`
  }
  
  return '暂无'
}

// 刷新数据
const refreshData = () => {
  Taro.showToast({
    title: '数据已是最新',
    icon: 'success',
    duration: 1500
  })
}

// 返回
const goBack = () => {
  Taro.navigateBack()
}

// 跳转到子页面
function goTo(subPage: string) {
  Taro.navigateTo({
    url: subPage
  })
}
</script>

<style lang="scss">
.nut-cell-group__wrap{
  box-shadow: none !important;
}
</style>